import React from 'react';
import './WindowControls.css';

const WindowControls = ({ 
  title = "应用标题", 
  showTitle = true, 
  iconPath = null, // 改为null，让组件自动处理路径
  className = '',
  backgroundColor = '#f0f0f0',
  textColor = '#333333',
  onMinimize,
  onMaximize,
  onClose 
}) => {
  // 根据环境确定正确的图标路径
  const getIconPath = () => {
    if (iconPath) {
      return iconPath; // 如果传入了自定义路径，使用自定义路径
    }
    // 检查是否在Electron环境中
    if (window.location.protocol === 'file:') {
      // 打包后的Electron环境，使用相对路径
      return './icons/app-icon.png';
    } else {
      // 开发环境，使用绝对路径
      return '/icons/app-icon.png';
    }
  };
  const handleMinimize = () => {
    console.log('最小化按钮被点击');
    if (onMinimize) {
      onMinimize();
    } else if (window.electronAPI) {
      window.electronAPI.minimizeWindow();
    } else {
      console.log('electronAPI 不可用');
    }
  };

  const handleMaximize = () => {
    console.log('最大化按钮被点击');
    if (onMaximize) {
      onMaximize();
    } else if (window.electronAPI) {
      window.electronAPI.maximizeWindow();
    } else {
      console.log('electronAPI 不可用');
    }
  };

  const handleClose = () => {
    console.log('关闭按钮被点击');
    if (onClose) {
      onClose();
    } else if (window.electronAPI) {
      window.electronAPI.closeWindow();
    } else {
      console.log('electronAPI 不可用');
    }
  };

  const containerStyle = {
    backgroundColor: backgroundColor,
  };

  const titleStyle = {
    color: textColor,
  };

  const buttonStyle = {
    color: textColor,
  };

  return (
    <div 
      className={`window-controls-container ${className}`}
      style={containerStyle}
    >
      <div className="window-controls__left">
        <div className="window-controls__icon">
          <img 
            src={getIconPath()} 
            alt="应用图标" 
            className="window-controls__icon-img"
          />
        </div>
        {showTitle && (
          <div className="window-controls__title" style={titleStyle}>
            {title}
          </div>
        )}
      </div>
      <div className="window-controls">
        <button 
          className="window-controls__button window-controls__button--minimize"
          onClick={handleMinimize}
          title="最小化"
          style={buttonStyle}
        >
          <svg width="10" height="10" viewBox="0 0 10 10">
            <rect x="2" y="4.5" width="6" height="1" fill="currentColor"/>
          </svg>
        </button>
        
        <button 
          className="window-controls__button window-controls__button--maximize"
          onClick={handleMaximize}
          title="最大化/还原"
          style={buttonStyle}
        >
          <svg width="10" height="10" viewBox="0 0 10 10">
            <rect x="2" y="2" width="6" height="6" fill="none" stroke="currentColor" strokeWidth="1"/>
          </svg>
        </button>
        
        <button 
          className="window-controls__button window-controls__button--close"
          onClick={handleClose}
          title="关闭"
          style={buttonStyle}
        >
          <svg width="10" height="10" viewBox="0 0 10 10">
            <path d="M2 2L8 8M8 2L2 8" stroke="currentColor" strokeWidth="1" strokeLinecap="round"/>
          </svg>
        </button>
      </div>
    </div>
  );
};

export default WindowControls;
